
<template>
    <div class="loop-line Sys-content-box">
        <!--添加一级区域-->
        <button class="add-btn" @click="addLoopLine"><span class="iconfont">+</span>新增环线</button>
        <div class="table-box">
                <el-table
                        :data="tableData"
                        border
                        style="width: 50%">
                    <el-table-column
                            prop="location_sort"
                            label="排序"
                            align="center"
                            width="80"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="location_name"
                            label="环线"
                    >
                    </el-table-column>

                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="editLoop(scope.row)" type="text" size="small">编辑</el-button>  <!--添加2级区域-->
                            <el-button type="text" size="small" @click="deleteLoop(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <!--添加-->
                <SysLoopAddForm
                        class="addForm"
                        :form="formData"
                        :title="addDialogTitle"
                        v-if="addFormVisible"
                        :drawUrl="nowUrl"
                        :nowtype="configtype"
                        @onclose="closeadddia(arguments)"
                >
                </SysLoopAddForm>
        </div>

        <p class="total-size">总计<span>{{totalSize}}</span>条记录</p>
        <!--分页-->
        <el-pagination

                :page-size="pageSize"
                @current-change="fenye"
                layout="prev, pager, next"
                :page-count="pageCount"
        >
        </el-pagination>
        <!--删除组件-->
        <SysConfigDel
                :form="delItem"
                :title="delDialogTitle"
                :visible="delFormVisile"
                :nowtype="configtype"
                :drawUrl="nowUrl"
                @onclose="closedeldia(arguments)"
        >
        </SysConfigDel>
    </div>
</template>
<script>
    /*添加弹框引入*/
    import SysLoopAddForm  from '../components/SysLoopAddForm'
    import SysConfigDel  from '../components/SysConfigDel'

    export default {
        name: "SysLoopLinePage",
        components:{
            SysLoopAddForm,
            SysConfigDel,
        },
            props:['configtype'],
        data() {
            return {
                totalSize:1,
//添加pageSize
                pageSize:10,
                formData:{},
                /*添加弹框的数据*/
                addFormVisible: false,
                selectAreaData: {},
                selectTableNum: "",

                /*区域表格数据接受后端返回的已分页*/
                tableData:[],
                pageCount:1,
                //当前页
                currentPage:1,
                //添加/修改
                addDialogTitle: "",

                dialogTitleMap: {
                    addLoopTitle: "添加环线",
                    editLoopTitle: "修改环线",
                },
//删除组件
                delDialogTitle: "环线",
               
                //是否显示删除标签的图标
                deltagvisible:false,
                delFormVisile:false,
                delItem:{},
                nowUrl:{
                    geturl:'/loop_line/queryLoopLine',
                    delurl:'/loop_line/delLoopLine',
                    addurl:'/loop_line/addLoopLine',
                    editurl:'/loop_line/updateLoopLine',
                }
            };
        },
        methods: {
            //添加环线
            addLoopLine() {
                this.addDialogTitle = this.dialogTitleMap.addLoopTitle;
                this.addFormVisible = true;
                this.formData = {
                    location_name:'',
                    location_sort:0,
                    location_id:'',
                    location_type:'环线位置'
                };
            },
            //删除
            deleteLoop(item){

                //删除区
                this.delFormVisile = true;
                this.delItem = { ...item };
            },
            closedeldia(e) {
                if (e[0]) {
                    //重新获取区块信息
                    this.getLoopData()
                } else {
                    this.$message({
                        type: "info",
                        message: "取消操作",
                    });
                }
                this.delFormVisile = false;
            },
            //打开删除标签
            //删除标签
//编辑
            editLoop(item){
                this.addDialogTitle = this.dialogTitleMap.editLoopTitle;
                this.addFormVisible = true;
                this.formData = {
                  ...item
                };
                // console.log('this.formData')
                // console.log(this.formData)
            },
            //分页
            fenye(val) {
                this.currentPage = val;
                //调用查询函数。
              this.getLoopData()
            },
            closeadddia(e){
                this.addFormVisible=false
                if (!e[0]){
                    this.$message({
                        type:'info',
                        message:'取消操作'
                    })
                }else {
                    this.getLoopData()
                }

            },
            getLoopData(){
                this.axios({
                    url:'/loop_line/queryLoopLine',
                    method:'get',
                    params:{limit:this.pageSize,page:this.currentPage}
                }).then(data=>{
                    // console.log('获取全部数据')
                    // console.log(data)
                    this.tableData=data.data.dataList
                    this.pageCount=data.data.totalPage
                    this.totalSize=data.data.totalSize
                })
            },
            }
        ,
        created(){
            this.getLoopData()
        }

    }
</script>

<style lang="less">
    .loop-line{
        .table-box{
            width: 50%;
            position: relative;
        }

        .add-btn{
            border: none;
            background-color: #ffaa00;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
            margin: 20px 0;
            cursor: pointer;
        }
    }

</style>